<template>
    <view class="container">
        <!-- 顶部信息区域 -->
        <view class="user-info">
            <view class="avatar">
                <image class="avatar-placeholder" :src="userInfo.avater_url" mode="aspectFill"></image>
            </view>
            <view class="user-data">
                <view class="user-name">{{userInfo.name}}</view>
                <!-- <view class="checkin-days" @click="gotoInfo">个人资料</view> -->
                <!-- <view class="checkin-days">打卡天数: {{(userInfo.clock_day == '' ) ? '0' : userInfo.clock_day}}天</view> -->
            </view>
        </view>
        <!-- 点亮城市区域 -->
        <view class="light-up-city">
            <view class="section-title">点亮城市</view>
            <view class="city-buttons">
                <button v-for="(item, i) in lightCity" :key="i" class="city-btn" :class="{ active: isGuangzhouActive }">{{item.city}}</button>
            </view>
        </view>
        <!-- 我的轨迹行程区域 -->
        <view class="travel-trajectory">
            <view class="section-title">我的轨迹行程</view>
            <view class="trip-list">
                <view class="trip-item" v-for="(trip, index) in trips" :key="index">
                    <view class="trip-info">
                        <view class="trip-city">城市：{{trip.destination_city}}</view>
						<view class="trip-status" :class="{ unfinished: trip.progress === '0', finished: trip.progress !== '0' }">{{trip.progress == '0' ? '未完成' : '已完成'}}</view>
                    </view>
                    <view class="trip-date">开始时间: {{trip.date}}</view>
                </view>
            </view>
        </view>
		<!-- 退出登录按钮 -->
        <view class="logout-button-container">
            <button @tap="outlogin" class="logout-button">退出登录</button>
        </view>
    </view>
</template>

<script>
    var _self
    export default {
        data() {
            return {
                token: uni.getStorageSync('token'),
                phone: uni.getStorageSync('phone'),
                userId: uni.getStorageSync('uid'),
                userInfo: {},
                lightCity: [],
                isGuangzhouActive: true,
                trips: []
            };
        },
        created() {
            _self = this
        },
        methods: {
            gotoInfo() {
                uni.reLaunch({
                    url: '/pages/userInfo/userInfo'
                })
            },
            navigateToRegister() {
                uni.navigateTo({
                    url: '/pages/register/register'
                });
            },
            getUserInfo() {
                const token = uni.getStorageSync('token');
                console.log(uni.getStorageSync('phone'))
                uni.request({
                    url: 'https://api.xiaoyaoyou.hanfenga7.cn/api/v1/user/info/' + uni.getStorageSync('phone'),
                    method: 'GET',
                    header: {
                        'Authorization': `Bearer ${this.token}`,
                        'Content-Type': 'application/json'
                    },
                    success: (res) => {
                        if (res.data.code === 200) {
                            this.userInfo = res.data.data;
                            uni.setStorageSync('uid', res.data.data.id)
                            console.log(this.userInfo)
                        }
                    },
                    fail: (err) => {
                        this.errorMessage = '获取用户信息失败，请检查网络连接';
                        console.error('获取用户信息失败：', err);
                    }
                });
            },
            getUserLightCity() {
                uni.request({
                    method: 'GET',
                    url: 'https://api.xiaoyaoyou.hanfenga7.cn/api/v1/user/lightCity/' + _self.userId,
                    header: {
                        'Authorization': `Bearer ${this.token}`,
                        'Content-Type': 'application/json'
                    },
                    success(res) {
                        _self.lightCity = res.data.data
                    },
                    fail(err) {
                        console.error('获取用户点亮城市信息失败', err);
                    }
                });
            },
            getTrips() {
                uni.request({
                    url: 'https://api.xiaoyaoyou.hanfenga7.cn/api/v1/iterary/travelplan/uid/' + _self.userId,
                    header: {
                        'Authorization': `Bearer ${this.token}`,
                        'Content-Type': 'application/json'
                    },
                    success(res) {
                        _self.trips = res.data.data
                        console.log(res)
                    }
                });
            },
            outlogin() {
                uni.setStorageSync('token', '')
                uni.setStorageSync('phone', '')
                uni.reLaunch({
                    url: '/pages/index/index'
                })
            }
        },
        onLoad() {
            if (uni.getStorageSync('token') == '') {
                uni.reLaunch({
                    url: '/pages/login/login'
                })
            }
			if(uni.getStorageSync('uid') == ''){
				uni.reLaunch({
				    url: '/pages/my/my'
				});
			}
            this.getUserInfo()
            this.getUserLightCity()
            this.getTrips()
        },
		onShow() {
			if (uni.getStorageSync('token') == '') {
			    uni.reLaunch({
			        url: '/pages/login/login'
			    })
			}
			if(uni.getStorageSync('uid') == ''){
				uni.reLaunch({
				    url: '/pages/my/my'
				});
			}
			this.getUserInfo()
			this.getUserLightCity()
			this.getTrips()
		}
    };
</script>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

   .container {
        padding: 1.5rem;
        font-family: 'Inter', sans-serif;
        background-color: #f9fafb;
    }

   .user-info {
        display: flex;
        align-items: center;
        background-color: #ffffff;
        padding: 1.25rem;
        border-radius: 0.75rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

   .avatar {
        width: 4rem;
        height: 4rem;
        margin-right: 1.25rem;
    }

   .avatar-placeholder {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

   .user-data {
        display: flex;
        flex-direction: column;
    }

   .user-name {
        font-size: 1.125rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 0.25rem;
    }

   .light-up-city,
   .travel-trajectory {
        background-color: #ffffff;
        padding: 1.25rem;
        border-radius: 0.75rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

   .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 1rem;
    }

   .city-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

   .city-btn {
        background-color: #e5e7eb;
        border: none;
        border-radius: 1rem;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        color: #4b5563;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

   .city-btn.active {
        background-color: #4b90f6;
        color: #ffffff;
    }

   .city-btn:hover {
        background-color: #d1d5db;
    }

   .trip-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

   .trip-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 1rem;
        background-color: #f3f4f6;
        border-radius: 0.5rem;
    }

   .trip-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

   .trip-city {
        font-size: 1rem;
        font-weight: 500;
        color: #1f2937;
    }

   .trip-status {
        padding: 0.25rem 0.75rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
        font-weight: 500;
        color: #ffffff;
    }

   .trip-status.unfinished {
        background-color: #ef4444;
    }

   .trip-status.finished {
        background-color: #4b90f6;
    }

   .trip-date {
        font-size: 0.875rem;
        color: #6b7280;
    }

   .logout-button-container {
        text-align: center;
    }

	/* 退出登录 */
   .logout-button {
		max-width: 180px;
        background-color: #dc2626;
        color: #ffffff;
        border: none;
        border-radius: 0.75rem;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        padding: 0.35rem;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s ease;
		
    }

   .logout-button:hover {
        background-color: #b91c1c;
    }
</style>    